<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { getgame, gettag } from "@/api/game"
import { onMounted } from "vue"
import { type Ref } from "vue"
import { useRouter } from "vue-router"
import game from "@/components/game.vue"
import { ta } from 'element-plus/es/locale/index.mjs'
const activeName = ref('first')
const active1 = ref('first')
let router = useRouter()
const handleClick = (tab: TabsPaneContext, event: Event) => {
}
let tagList: Ref<any[]> = ref([])
let fList: Ref<any[]> = ref([])
let sList: Ref<any[]> = ref([])
let tList: Ref<any[]> = ref([])
let fouList: Ref<any[]> = ref([])
let fList2: Ref<any[]> = ref([])
let sList2: Ref<any[]> = ref([])
let tList2: Ref<any[]> = ref([])
let fouList2: Ref<any[]> = ref([])
let a: Ref<number> = ref(0)
onMounted(() => {
    getgame().then(res => {
        // console.log(res.data[1]);
        for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].type == '最新上线') {
                fList.value.push(res.data[i])
            }
            else if (res.data[i].type == '热门推荐') {
                sList.value.push(res.data[i])
            }
            else if (res.data[i].type == '好评高分') {
                tList.value.push(res.data[i])
            }
            else if (res.data[i].type == '最新折扣') {
                fouList.value.push(res.data[i])
            }
        }
        // console.log(fList, res);

        // console.log(fList);

    })
    gettag().then(res => {
        tagList.value = res.data
        console.log(tagList.value);

    })
})
function tag(arr: Ref<any[]>, arr2: Ref<any[]>, val: number) {
    console.log();
    if (tagList.value[val].iS == true) {
        for (let i = 0; i < arr.value.length; i++) {
            if (arr.value[i].type1 == tagList.value[val].tag || arr.value[i].type2 == tagList.value[val].tag || arr.value[i].type3 == tagList.value[val].tag) {
                arr2.value.push(arr.value[i])
            }
        }
        arr.value = arr2.value
        arr2.value = []
    }

}

function tag2(num: number, val: number) {
    if (num == 1) {
        tag(fList, fList2, val)
    }
    if (num == 2) {
        tag(sList, sList2, val)
    }
    if (num == 3) {
        tag(tList, tList2, val)
    }
    if (num == 4) {
        tag(fouList, fouList2, val)
    }
}

async function tagrendering(val: number, num: number) {
    if (tagList.value[val].iS == true) {
        tagList.value[val].iS = !tagList.value[val].iS
    }
    else {
        for (let i = 0; i < tagList.value.length; i++) {
            tagList.value[i].iS = false
        }
        tagList.value[val].iS = true
    }
    await getgame().then(res => {
        if (num == 1) {
            fList.value = []
            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].type == '最新上线') {
                    fList.value.push(res.data[i])
                }
            }
        }
        if (num == 2) {
            sList.value = []
            for (let i = 0; i < res.data.length; i++) {

                if (res.data[i].type == '热门推荐') {
                    sList.value.push(res.data[i])
                }
            }
        }
        if (num == 3) {
            tList.value = []
            for (let i = 0; i < res.data.length; i++) {

                if (res.data[i].type == '好评高分') {
                    tList.value.push(res.data[i])
                }
            }
        }
        if (num == 4) {
            fouList.value = []
            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].type == '最新折扣') {
                    fouList.value.push(res.data[i])
                }

            }
        }


        a.value = 1
    })
    await tag2(num, val)




}
</script>
<template>
    <div style="padding: 10px;">
        <el-tabs v-model="activeName" stretch class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="最新上线" name="first">
                <el-check-tag style="margin:6px;" v-for="(item, index) in tagList" :checked="item.iS" type="success"
                    @click="tagrendering(index, 1)">
                    {{ item.tag }}
                </el-check-tag>
                <game v-for="ite in fList" :key="ite.id" :ite="ite"></game>
            </el-tab-pane>
            <el-tab-pane label="热门推荐" name="second">
                <el-check-tag style="margin:6px;" v-for="(item, index) in tagList" :checked="item.iS" type="success"
                    @click="tagrendering(index, 2)">
                    {{ item.tag }}
                </el-check-tag>
                <game v-for="ite in sList" :key="ite.id" :ite="ite"></game>
            </el-tab-pane>
            <el-tab-pane label="好评高分" name="third">
                <el-check-tag style="margin:6px;" v-for="(item, index) in tagList" :checked="item.iS" type="success"
                    @click="tagrendering(index, 3)">
                    {{ item.tag }}
                </el-check-tag>
                <game v-for="ite in tList" :key="ite.id" :ite="ite"></game>
            </el-tab-pane>
            <el-tab-pane label="最新折扣" name="fourth">
                <el-check-tag style="margin:6px;" v-for="(item, index) in tagList" :checked="item.iS" type="success"
                    @click="tagrendering(index, 4)">
                    {{ item.tag }}
                </el-check-tag>
                <game v-for="ite in fouList" :key="ite.id" :ite="ite"></game>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>